<!--
  Copyright (c) chb my copyright message. 2022-2023. All rights reserved.

  -->

<template>
  <div id="login">
    <vue-particles
      class="login-bg"
      color="#0f1c70"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="2"
      linesColor="#8DD1FE"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >

    </vue-particles>
    <div class="content">
      <div>
        <img :src="qrimg">
      </div>
      <div>请使用网易云音乐App扫码</div>
      <div @click="anonimous">游客登录</div>
      <div>
        <button @click="$router.push('/')">返回主页</button>
        <button @click="getLognQrKey">刷新二维码</button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  anonimous,
  getLoginCeLLPhone,
  getLoginQrCheck,
  getLoginStatus,
  getLognQrCreate,
  getLognQrKey,
  youke
} from "../../api/login";

export default {
  name: "login",

  data() {
    return {
      unikey: '',
      qrimg: '',
      cookie: '',
    }
  },
  mounted() {
    // 获取二维码
    this.getLognQrKey()
    // 对二维码状态进行轮训
    this.timer = window.setInterval(() => {
      setTimeout(() => {
        this.getLoginQrCheck()
      }, 0)
    }, 3000)
    this.getLoginStatus()
  },
  destroyed() {
    window.clearInterval(this.timer)
  },
  methods: {
    // 获取二维码
    getLognQrKey() {
      this.qrimg = ''
      getLognQrKey().then(res => {
        this.unikey = res.data.data.unikey
        getLognQrCreate(res.data.data.unikey).then(res => {
          this.qrimg = res.data.data.qrimg
        })
      })
    },
    // 二维码状态检测
    getLoginQrCheck() {
      getLoginQrCheck(this.unikey).then(res => {
        if (res.status === 200) {
          if (res.data.code == 801) {
          } else if (res.data.code == 803) {  //803表示登录成功
            this.cookie = res.data.cookie
            //如果成功登录就调用loginSuccess方法
            this.$store.commit('loginSuccess', res.data.cookie)
            this.$router.push('/')
          }
        }
      })
    },
    // 登录状态
    getLoginStatus() {
      getLoginStatus().then(res => {
        // 登录成功状态下，回到主页
        if (res.data.data.code === 200) {
          // console.log(res.data.data.account.userName)
          // this.$router.push('/')
        }
      })
    },
    //游客登录
    anonimous() {
      anonimous().then(res => {
        console.log(res)
        this.cookie = res.data.cookie
        //如果成功登录就调用loginSuccess方法
        this.$store.commit('loginSuccess', res.data.cookie)
        this.$router.push('/')
      })
    }
  }
}
</script>

<style scoped lang="scss">
#login {
  width: 100%;
  height: 100%;
  //background-color: #ff0000;

  .login-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fdb2b0;
  }

  .content {
    position: relative;
    text-align: center;
    padding: 100px 20px 20px;

    div {
      margin: 20px;
    }
  }
}
</style>
